Notificaciones

Informar a los usuarios

Las notificaciones de la aplicación están diseñadas para informar a los usuarios sobre actualizaciones o información importantes dentro del contexto de una aplicación. Ya sea un nuevo mensaje, una actualización del sistema o un recordatorio de eventos, las notificaciones garantizan que los usuarios estén al tanto de lo que sucede en tiempo real. Esto mantiene a los usuarios comprometidos e informados sin necesidad de verificar constantemente la aplicación.

Proporcionar alertas oportunas

Las notificaciones son cruciales para proporcionar alertas oportunas que requieren atención o acción inmediata. Por ejemplo, una aplicación puede enviar una notificación sobre una reunión próxima, una venta que termina pronto o una alerta de seguridad urgente. Estos mensajes instan a los usuarios a actuar rápidamente, asegurando que no pierdan eventos o fechas importantes.

Comprometer a los usuarios

Las notificaciones también sirven para comprometer a los usuarios proporcionando información relevante que mejora su experiencia con la aplicación. Esto podría incluir contenido personalizado, ofertas especiales o consejos y tutoriales. Al entregar valor a través de las notificaciones, las aplicaciones pueden mantener el interés del usuario y fomentar la interacción regular. Nuestro UI KIT incluye componentes de notificación personalizables que se pueden adaptar a las necesidades y marca únicas de cualquier aplicación, garantizando una comunicación efectiva y la participación del usuario.

Visión General

El componente Notificaciones UI en Emvi UI centraliza la comunicación con el usuario a través de mensajes contextuales y persistentes que pueden agrupar múltiples eventos en un solo lugar. A diferencia de las alertas o los toasts, las notificaciones se suelen mostrar en paneles laterales, modales o dropdowns, ofreciendo más espacio para texto, acciones y organización de estados.

Son útiles para sistemas con alta densidad de interacción (apps SaaS, e-commerce, plataformas colaborativas) donde los usuarios necesitan acceder rápidamente a mensajes relacionados con su cuenta, actividad reciente o recordatorios.

Estructura y Anatomía

Cada notificación incluye:

- Encabezado (ej. "Nuevo mensaje", "Actualización de sistema")
- Cuerpo de texto con detalle del evento
- Ícono contextual que refuerza el tipo de mensaje (éxito, error, advertencia, info)
- Acciones rápidas como botones ("ver más", "descartar", "responder")
- Marca temporal opcional

Variantes de Notificación

- Contextuales: aparecen dentro de dropdowns o paneles laterales
- Persistentes: se mantienen visibles hasta que el usuario las gestiona
- Interactivos: incluyen botones o enlaces directos para actuar de inmediato
- Agrupados: muestran varias notificaciones dentro de una misma bandeja

Accesibilidad y Responsividad

- Roles semánticos como role="status" o role="alert"
- Contraste de color validado según WCAG AA
- Navegación por teclado (Tab, Enter, Esc)
- En móvil, los paneles de notificación pueden ocupar toda la pantalla

Integración

En Figma, existen como componentes modulares con variantes de estilo (light/dark, tipo, con/sin íconos, con/sin acciones).

En Tailwind CSS, se implementan con utilidades como flex, items-start, gap-x-*, bg-*, shadow-md, rounded-lg, y animate-in/out.